<template>
	<div class="MatchSignUp">
		<div class="basicInfo">
			<div style="flex: 1.5 1 65%;">
				<span><i class='iconfont icon-xinghao colorRed'></i>赛事名称：<b>{{com_info.name}}</b></span>
				<span><i class='iconfont icon-xinghao colorRed'></i>裁判长：<b>{{com_info.ref_name}}</b></span>
			</div>
			<div style="flex: 2;display: flex;justify-content: flex-end;align-items: baseline;">
				<div class="btnGroup" style="display: flex;">
					<a :href="ApplyUrl" download='裁判评估'>
						<el-button type="primary" size="medium" @click="opens" :loading="loading">导出</el-button>
					</a>
				</div>
			</div>
		</div>
		<el-table :data="tableData3" style="width: 100%;margin-top: 20px;">
			<el-table-column prop="ref_name" label="裁判姓名" width="150">
			</el-table-column>
			<el-table-column :label="time[index]" v-for="(item, index) in time" :key="index">
				<el-table-column prop="" label="执裁场数" width="80">
					<template slot-scope="scope">
						<span style="display: inline-block;width: 100%;cursor: pointer;" @click="judgeMatch(scope.row.ref_id, time[index])">{{scope.row[time[index]].count_match}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="" label="更正次数" width="80">
					<template slot-scope="scope">
						<span style="display: inline-block;width: 100%;cursor: pointer;" @click="correctScore(scope.row.ref_id, time[index])">{{scope.row[time[index]].correct_num}}</span>
					</template>
				</el-table-column>
			</el-table-column>
		</el-table>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="1000px">
			<div class="judgeParent">
				<div v-for="(item, index) in judge" :key="index" class="judge">
					<div class="row_left"><span>{{item.ground_name}}</span><span>{{item.row}}#</span></div>
					<div class="judgeCenter">
						<div class="name_a">
							<div>
								<span v-if="item.team_name_a">
									<span>{{item.site_a}}</span>
									<span>{{item.name_a}}</span>
									{{item.team_name_a}}
								</span>
								<span v-else>
									<span>{{item.site_a}}</span>
									{{item.name_a}}
								</span>
								<span>{{item.one_limit_a}}</span>
							</div>
						</div>
						<div class="vsGround">
							<div class="VS">VS</div>
							<div class="numBox" v-for="(game,gameIndex) in status == 0? item.score : item.round_num" :key="gameIndex" v-if="gameIndex < 4">
								<div class="numTop">
									<div style="display: flex;">
										<div style="width:50%;text-align: right;">{{game.top}}</div>
										<div style="font-size: 8px;position: relative;transform: scale(0.9, 0.9);width: 50%;text-align: left;" v-if="game.top < game.bot">{{game.tiebreak}}</div>
									</div>
								</div>
								<div>
									<div style="display: flex;">
										<div style="width:50%;text-align: right;">{{game.bot}}</div>
										<div style="font-size: 8px;position: relative;transform: scale(0.9, 0.9);width: 50%;text-align: left;" v-if="game.top > game.bot">{{game.tiebreak}}</div>
									</div>
								</div>
							</div>
						</div>
						<div class="name_b">
							<div>
								<span v-if="item.team_name_b">
									<span>{{item.site_b}}</span>
									<span>{{item.name_b}}</span>
									{{item.team_name_b}}
								</span>
								<span v-else>
									<span>{{item.site_b}}</span>
									{{item.name_b}}
								</span>
								<span>{{item.one_limit_b}}</span>
							</div>
						</div>
					</div>
					<div class="stage">{{item.group_name}}{{item.com_system}}</div>
					<div class="stage" v-if="item.com_system != 3 && item.com_system != 5">第{{item.stage}}阶段
            <span v-if="item.stage == 1">第{{item.wheel}}轮</span>
            <span v-if="item.stage == 2">{{item|wheelName}}</span>
          </div>
					<div class="stage" v-else-if="item.com_system == 5">{{item.second_order + 1}}区 {{item|wheelName}}</div>
          <div class="stage" v-else-if="item.com_system == 3">{{item|wheelName}}</div>
					<div class="referee">
						<span>{{item.user_name}}</span>
						<span v-if="status == 0">比赛用时:{{item.match_time}}</span>
						<span v-if="status == 1">更正时间:{{item.update_time}}</span>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import schedule from '@/utils/schedule.js'
	export default {
		data() {
			return {
				com_info: {},
				time: [],
				loading: false,
				tableData3: [],
				dialogVisible: false,
				judge: [],
				status:null
			}
		},
		mounted() {
			this.init()
		},
		filters: {
			wheelName: (battle) => {
				return schedule.wheelName(battle)
			},
		},
		computed: {
			ApplyUrl() {
				let url = this.$axios.defaults.baseURL + '/RefereeAssess/export_ref_assess?com_id=' + this.$route.query.MatchId
				return url
			},
			title(){
				return this.status == 0 ? '执裁场次' : '更正统计'
			}
		},
		methods: {
			init() {
				this.$axios.post('/RefereeAssess/index', {
						com_id: this.$route.query.MatchId,
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.com_info = res.data.data.com_info
							this.time = res.data.data.time
							this.tableData3 = res.data.data.ref_list
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			opens() {
				this.loading = true
				setTimeout(() => {
					this.loading = false
				}, 800)
			},
			judgeMatch(ref_id, date) {
				this.$axios.post('/RefereeAssess/judge_match', {
						com_id: this.$route.query.MatchId,
						ref_id: ref_id,
						match_date: date
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.status = 0;
							this.dialogVisible = true
							this.judge = res.data.data
						} else {
							this.$message({
								type: 'info',
								message: '暂无执裁场次信息'
							})
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			correctScore(ref_id, date) {
				this.$axios.post('/RefereeAssess/correct_score', {
						com_id: this.$route.query.MatchId,
						ref_id: ref_id,
						match_date: date
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000) {
							this.status = 1;
							this.dialogVisible = true
							this.judge = res.data.data
						} else {
							this.$message({
								type: 'info',
								message: '暂无执裁场次信息'
							})
						}
					})
					.catch(error => {
						console.log(error)
					});
			}
		}
	}
</script>

<style lang="less" scoped>
	.row_left{
		display: flex;
		justify-content: space-between;
		padding: 0 4px;
	}
	.colorRed {
		color: red;
		font-size: 12px
	}

	.MatchSignUp {
		padding: 20px;
	}

	.basicInfo {
		background: linear-gradient(90deg, rgba(66, 185, 131, 0.2), rgba(66, 185, 131, 0.4));
		border-radius: 2px;
		line-height: 30px;
		height: 30px;
		padding: 15px;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		align-items: center;

		span {
			margin-right: 20px;
		}

		.btnGroup {
			margin-right: 20px;
		}

		.date {
			width: 25%;
			padding: 10px 15px;
		}
	}

	.judgeParent {
		// display: flex;
		// justify-content: space-between;
		// flex-wrap: wrap;
		&::after{
			content: '';
			display: block;
			overflow: hidden;
			height: 0;
			clear:both;
		}
		.judgeCenter {
			padding: 0 10px;

			.name_a,
			.name_b {
				text-align: center;
			}
		}

		.row {
			text-align: right;
		}

		.judge {
			position: relative;
			width: 25%;
			height: 164px;
			float: left;
			box-sizing: border-box;
			border: 1px #bbb solid;
		}

		.player {
			border-top: 1px #bbb dotted;
			border-bottom: 1px #bbb dotted;

			.playerBorder {
				span {
					display: block;
					width: 20px;
					height: 20px;
					border-left: 1px #bbb dotted;
					border-bottom: 1px #bbb dotted;
				}
			}
		}

		.vsGround {
			text-align: left;
			margin: 0 15%;
			height: 36px;
			display: flex;
			align-items: center;
			border-bottom: 1px dashed rgba(102, 102, 102, 0.4);
			border-top: 1px dashed rgba(102, 102, 102, 0.4);

			.VS {
				height: 100%;
				border-right: 1px dashed #6666;
				line-height: 36px;
				// padding-right: 6%;
				// padding-left: 4%;
				padding-right: 4%;
			}

			.numBox {
				flex: 1;
				height: 100%;
				border-right: 1px dashed #6666;
				text-align: center;

				/*max-width: 36px;*/
				.numTop {
					height: 50%;
					border-bottom: 1px dashed #6666;
				}
			}
		}
	}

	.referee {
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		padding: 0 5px;
	}

	.stage {
		text-align: center;
	}
</style>
